<template>
	<div style="height:100%">
		<cl-crud @load="onLoad">
			<template #table-column-type="{scope}">
				<span v-if="scope.row.type == 1">浏览类目</span>
				<span v-if="scope.row.type == 2">分享</span>
				<span v-if="scope.row.type == 3">搜卷</span>
				<span v-if="scope.row.type == 4">兑礼品</span>
			</template>
			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
				<el-tag type="info" v-else>禁用</el-tag>
			</template>
			<template #table-column-iconUrl="{scope}">
				<cl-avatar
					shape="square"
					size="medium"
					:src="scope.row.iconUrl | default_avatar"
					:style="{ margin: 'auto' }"
				>
				</cl-avatar>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import store from 'store';
export default {
	data() {
		return {};
	},

	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.integralMall.goldTask)
				.set('table', {
					columns: [
						{
							prop: 'name',
							label: '任务名称',
							align: 'center'
						},
						{
							prop: 'iconUrl',
							label: '图标',
							align: 'center'
						},
						{
							prop: 'type',
							label: '类型',
							align: 'center'
						},
						{
							prop: 'floorName',
							label: '跳转',
							align: 'center',
							emptyText: '--'
						},
						{
							prop: 'goldAmount',
							label: '金币个数',
							align: 'center',
							sortable: 'custom'
						},
						{
							prop: 'level',
							label: '排序',
							align: 'center',
							sortable: 'custom'
						},
						{
							prop: 'remark',
							label: '备注',
							align: 'center'
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						}
					],
					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '112px'
					},
					items: [
						{
							prop: 'name',
							label: '任务名称',
							span: 13,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入任务名称'
								}
							},
							rules: [
								{
									required: true,
									message: '请输入任务名称',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'iconUrl',
							label: 'icon',
							span: 13,
							component: {
								name: 'cl-upload'
							},
							rules: [
								{
									required: true,
									message: '请选择icon',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'type',
							label: '类型',
							span: 13,
							value: 1,
							component: {
								name: 'el-select',
								options: [
									{
										label: '游览类目',
										value: 1
									},
									{
										label: '分享',
										value: 2
									},
									{
										label: '搜券',
										value: 3
									},
									{
										label: '金币任务',
										value: 4
									}
								],
								on: {
									change(val) {
										if (val == 1) {
											app.hiddenItem('floorId', false);
										} else {
											app.hiddenItem('floorId', true);
										}
									}
								}
							},
							rules: [
								{
									required: true,
									message: '请选择补贴形式',
									trigger: 'blur'
								}
							]
						},

						{
							prop: 'floorId',
							label: '跳转',
							span: 13,
							hidden: false,
							component: {
								name: 'el-select',
								options: []
							},
							rules: [
								{
									required: true,
									message: '请选择跳转',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'goldAmount',
							label: '金币数(金币)',
							span: 13,
							value: 1,
							component: {
								name: 'el-input-number',
								attrs: {
									min: 1
								}
							},
							rules: [
								{
									required: true,
									message: '请输入金币数',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'level',
							label: '排序：',
							value: 1,
							component: {
								name: 'ysqlevels',
								data() {
									return {
										ysqLevel: 1
									};
								},
								props: {
									value: null
								},
								watch: {
									value(val) {
										this.ysqLevel = val;
									}
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div>
											<el-input-number
												v-model={this.ysqLevel}
												controls-position="right"
												onInput={this.input}
												min={1}
												max={10000}></el-input-number>
											<span style="color:#999999;margin-left:10px">
												序号越大，排序越靠前
											</span>
										</div>
									);
								}
							}
						},
						{
							prop: 'sceneKey',
							label: '场景key',
							span: 13,
							component: {
								name: 'el-input',
								props: {
									disabled: false
								}
							},
							rules: [
								{
									required: true,
									message: '请输入场景key',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'remark',
							label: '备注',
							span: 13,
							component: {
								name: 'el-input'
							}
						},
						{
							prop: 'status',
							label: '状态',
							span: 13,
							value: 2,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 2
									}
								]
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					next(params);
					let list = await this.$service.goodsMenagement.specialClassify.list({
						specialType: 100,
						app: store.get('platForm')
					});

					app.setData(
						'upsert.items[prop:floorId].component.options',
						list.map(e => {
							return {
								label: e.mainName,
								value: e.floorId
							};
						})
					);
				})
				.on('open', async (isEdit, data) => {
					if (isEdit) {
						if (data.type == 1) {
							app.hiddenItem('floorId', false);
						} else {
							app.hiddenItem('floorId', true);
						}
						app.setData('upsert.items[prop:sceneKey].component.props.disabled', true);
					} else {
						app.setData('upsert.items[prop:sceneKey].component.props.disabled', false);
					}
				})
				.on('submit', async (isEdit, data, { next }) => {
					next({
						...data
					});
				})
				.done();
			app.refresh();
		}
	}
};
</script>
<style lang="scss" scoped></style>
